Auth0の2要素認証でTwilio連携してSMSを使用する
Auth0は、MFAを実装するためにSMSが使用できます。
ログイン情報を入力後、ユーザーが所有しているデバイスにSMSを介してコードが送信され、 そのコードを入力してログイントランザクションが完了します。
今回は実際にSMSを使用したMFAを実装したいと思います。
注意点として、Auth0のフリープランだった場合、SMSのコードが100個までしか発行できません。 この制限を解除するには、Twilioと連携する必要があります。 その他のプランでもSMSを利用するにはTwilioとの連携が必要です。 そして、地理的な地域のアクセス許可を有効にする必要があります。
Twilioの設定方法も含め試していきたいと思います。
Twilioアカウントの作成
https://www.twilio.com/ja/にアクセスし、左上の方にある無料サインアップ
をクリックします。
入力フォームで必要な情報を入力し、アカウントを作成します。
メールアドレスの確認を行うためのリンクが登録したメールアドレスに送られてくるので、そのリンクをクリックします。 クリックすると以下のような画面に遷移します・
自身が持つ電話番号を入力しすると確認コードが送られてくるので、そのコードを入力すれば完了です。
ログインが完了しているはずなので、
Auth0で必要な TwilioアカウントSID
と Twilio認証トークン
を取得します。
https://jp.twilio.com/consoleにアクセスしましょう。
アカウントSID
とAUTHTOKEN
というのが表示されているので、それぞれコピーして控えておきます。
TwilioでMessaging Servicesの作成と設定
https://www.twilio.com/console/sms/servicesに遷移し、Messaging Servicesを作成します。
FRIENDLY NAME
に任意の値を入力し、USE CASE
には2 Factor Authenticationを選択します。
電話番号の購入
電話番号を購入します。
現在、Twilioでは日本の電話番号でSMS送信をできないみたいです。 Twilioの国際電話番号の利用可能性とその機能 のページを参照し、SMSが利用可能で国内 SMSのみがNOとなっている国を選択します。 今回はアメリカにします。
Country
をUnited States
, 機能
をSMS
として検索すると、以下のように購入できる電話番号が表示されます。
電話番号を選択し、購入ボタンを押せば購入完了となります。
Messaging Servicesに電話番号を追加
コンソール(SMS < Messaging Services < [YOUR_Messaging_Service] < Numbers
)で先ほど購入した電話番号でSMSを送信するように設定します。
Add an Existing Number
をクリックし、購入した電話番号にチェックを入れて追加します。
Messaging ServicesにAlpha Sender ID を追加
コンソール(SMS < Messaging Services < [YOUR_Messaging_Service] < Features
)でAlpha Sender ID
を追加します。
Alpha Sender ID
でSMSを送信すると、ユーザーはそのIDで受信するのでメッセージの識別がしやすくなります。
ただし、日本は現在デフォルトでサポートされておらず、番号の事前登録、限定販売 - 営業担当者に相談
が必要です。
地理的な地域のアクセス許可の設定
コンソールのMessaging Geographic Permissions設定画面で、
japan
にチェックを入れておきます。
ここまでで
- Twilioアカウントの作成
- 電話番号の購入
- Messaging Servicesの作成
- Messaging Servicesに電話番号の追加
- Messaging ServicesにAlpha Sender IDの追加
- 地理的な地域のアクセス許可の設定
を行いました。これでSMSを送れるようにするTwilioの設定が完了です。
Auth0での設定
ダッシュボード -> Multifactor Auth
にアクセスし、Always require Multi-factor Authentication
のトグルをオンにします。
※ 常にMFAを有効にするという設定です。Rulesを使えばアプリケーション毎にMFA要素をオンオフできますが、今回は割愛します。
次に、SMSのボックスをクリックします。
SMSの設定画面がオープンするので入力していきます。
- Twilio SID
- Twilioのコンソールに表示されている
アカウントSID
- Twilioのコンソールに表示されている
- Twilio AuthToken
- Twilioのコンソールに表示されている
AUTHTOKEN
- Twilioのコンソールに表示されている
- SMS Source
- Use Copilot
- Copilotの機能を用いて送信する
- Copilot機能について
- Use From
- From電話番号を使用して送信する
- Use Copilot
- Copilot SID
- SMS SourceでUse Copilotを選択した場合に入力
- 作成したMessaging Servicesの
SERVICE SID
- From
- SMS SourceでUse Fromを選択した場合に電話番号を入力。今回はこちらを使用します。
- Enrollment Template
- デバイスの登録中にAuth0によって送信されるメッセージ
- 例:
あなたの認証コードは{{code}}です。このコードを入力して、登録を確認してください
- Verification Template
- デバイスの所持を検証するためにAuth0によって送信されるメッセージ
- 例:
あなたの認証コード: {{code}}
SAVEボタンを押してAuth0の設定は完了です。
サンプルアプリケーションでSMSを試してみる
設定が終わったのでサンプルアプリケーションを使って試してみましょう。
Auth0が提供しているサンプルを使用します。今回は、
https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login を使います。
※ インストール方法やアプリの起動は上記レポジトリのREADMEを参照してください。
アプリを起動し、ログインのリンクをクリックすると以下のようにログインフォームが現れます。
メールアドレスとパスワードを入力し、アカウントの認証が終わると電話番号を入力する画面に遷移します。
自分の持つ端末の電話番号を入力し送信してください。
コードを入力する画面に遷移するので、電話番号に送られてきたコードを入力すればログインが完了となります。
TwilioのProgrammable SMS Dashboardにアクセスすると、 成功したか、失敗したかなどのSMSのイベントを確認できます。
最後に注意点の確認
Auth0からTwilioを使用してSMS送信する時の注意点
- 国外に送信する場合は国内SMSのみがNoになっている国の電話番号を取得する
- 日本の電話番号に
Alpha Sender ID
を使ってSMSを送信する場合は番号の事前登録、限定販売 - 営業担当者に相談
が必要 - 地理的な地域のアクセス許可の設定で日本が許可されていることを確認する